<!--
 * @Description: 角色列表
 * @Author: qingyang
 * @Date: 2022-01-10 16:04:17
 * @LastEditors: chenju
 * @LastEditTime: 2023-01-17 16:10:18
-->
<template>
  <div class="system-role-list-container">
    <CPageTable @register="registerPage" v-model:searchForm="searchForm">
      <template #headerRightButton>
        <el-button type="primary" @click="addTask" v-btnPermission="'ROLE_CREATE'"
          ><CIcon class="g-mr4" type="c-xian-xinjian"></CIcon>新增</el-button
        >
      </template>
      <template #roleName="{ scope }">
        <span v-if="!scope.row.presetFlag">{{ empty(scope.row.roleName) }}</span>
        <CLink v-else @click="handleViewAuth(scope.row)">{{ empty(scope.row.roleName) }}</CLink>
      </template>
      <template #op="{ scope }">
        <CTableButtonGroup :buttons-config="getTableButtonsConfig(scope.row)" />
      </template>
    </CPageTable>
    <add-or-edit-role-dialog
      v-model:visible="addOrEditTaskVisible"
      :info="infoDetail"
      @refresh="handleRefresh"
    ></add-or-edit-role-dialog>
    <member-list-dialog
      v-model:visible="memberVisible"
      :dataRole="roleInfo"
      @refresh="handleRefresh"
    ></member-list-dialog>
    <SetAuthDialog
      v-model:visible="setAuthVisible"
      :data="roleInfo"
      :readonly="setAuthReadonly"
      @refresh="handleRefresh"
    ></SetAuthDialog>
  </div>
</template>
<script lang="ts" setup name="SystemRoleList">
import { reactive, ref } from 'vue';
import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';
import { CLink } from '@/components/CLink';
import { useRoleList } from './useRoleList';
import AddOrEditRoleDialog from './components/AddOrEditRoleDialog/index.vue';
import MemberListDialog from './components/MemberListDialog/index.vue';
import SetAuthDialog from './components/SetAuthDialog/index.vue';
import { useMessage } from '@/hooks/useMessage';
import { deleteRole } from '@/apis/system/role';
import { CTableButtonGroup } from '@/components/CTable';
import type { TableButtonItem } from '@/components/CTable';
import { empty } from '@/utils';

const { createConfirm, createMessage } = useMessage();
const { searchOptions, searchForm, tableOptions, tableFieldsSetting } = useRoleList();
const addOrEditTaskVisible = ref(false);
const memberVisible = ref(false);
const setAuthVisible = ref(false);
const infoDetail = ref();
const roleInfo = ref();
const setAuthReadonly = ref(false);

const options = reactive<CPageTableProps>({
  title: '角色管理',
  searchOptions,
  tableOptions,
  tableFieldsSetting,
  enableFieldsSetting: true
});
const [registerPage, { refresh }] = useCPageTable(options);

const addTask = () => {
  roleInfo.value = undefined;
  setAuthReadonly.value = false;
  setAuthVisible.value = true;
};

const handleRefresh = () => {
  refresh();
};
const goMemberList = (item: any) => {
  roleInfo.value = item;
  memberVisible.value = true;
};
const dlt = (item: any) => {
  createConfirm('确认删除该角色？', '删除后需要重新创建角色。', {
    iconType: 'warning',
    confirmButtonText: '删除'
  }).then(async () => {
    deleteRole(item.id).then(() => {
      refresh();
      createMessage.success('删除角色成功');
    });
  });
};
const handleSetAuth = (item: any) => {
  roleInfo.value = item;
  setAuthReadonly.value = false;
  setAuthVisible.value = true;
};
const handleViewAuth = (item: any) => {
  roleInfo.value = item;
  setAuthReadonly.value = true;
  setAuthVisible.value = true;
};

/**
 * 配置表格的按钮
 * @param row 表格行数据
 */
function getTableButtonsConfig(row: any): TableButtonItem[] {
  if (row.presetFlag) {
    return [
      {
        text: `成员管理(${row.userNum})`,
        btnPermission: 'USER_ROLE_EDIT',
        onClick: () => goMemberList(row)
      }
    ];
  } else {
    return [
      {
        text: `成员管理(${row.userNum})`,
        btnPermission: 'USER_ROLE_EDIT',

        onClick: () => goMemberList(row)
      },
      {
        text: '编辑',
        btnPermission: 'ROLE_EDIT',
        onClick: () => handleSetAuth(row)
      },
      {
        text: '删除',
        btnPermission: 'ROLE_DELETE',
        onClick: () => dlt(row)
      }
    ];
  }
}
</script>

<style lang="scss" scoped>
.system-role-list-container {
  min-height: 80%;
}
.yuan {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #51596c;
  color: #fff;
  line-height: 28px;
  text-align: center;
  font-style: normal;
  margin-right: 10px;
}
</style>
